<template>
  <div class="about">
    {{$store.state.num}}
    {{score}}
    {{t}}
    {{a}}
    {{b}}
    <button @click="handleAdd">第一个+1</button>
    <button @click="handleCityList">字母</button>
    {{cityList}}
    {{$store.getters.CityListLen}}
    {{cityList2}}
  </div>
</template>

<script>
import {mapState,mapMutation,mapActions,mapGetters} from 'vuex';

export default({
  name:'about',
  data () {
    return {
      n:1,
    }
  },
  // computed: {
  //   score(){
  //     return this.$store.state.score;
  //   }
  // },
  // computed: mapState({
  //   t:(state)=>state.t,
  //   a:'a',
  //   b(state){
  //     return state.b+this.n;
  //   }
  // }),
  // computed: mapState(['t','a','b']),
  computed: {
    ...mapState({
      a:'a',
      cityList:'cityList',
    }),
    ...mapGetters({
      cityList2:'CityListLen2',
    })
  },
  methods: {
    handleAdd(){
      this.$store.commit('add',1);
    },
    handleCityList(){
      this.$store.dispatch('getCityList');
    }
  }
})
</script>